import 'package:flutter/material.dart';


///
///  Clip 剪切控件
///
///
///  ClipOval   使用椭圆剪辑其子项的小部件。
///   https://api.flutter-io.cn/flutter/widgets/ClipOval-class.html
///
///
///   CustomClipper，有关创建自定义剪辑的信息。
///   ClipRect，用于更高效的无圆角剪辑。
///   ClipRRect，用于带有圆角的剪辑。
///   ClipPath，用于任意形状的剪辑。
///
class ClipPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Clip"),
      ),
      body: getClip(),
    );

  }

}

getClip() {
// 头像
  Widget avatar = Image.asset("assets/images/1.jpeg", width: 60.0);
  return Center(
    child: Column(
      children: <Widget>[
        avatar, //不剪裁
        ClipOval(child: avatar), //剪裁为圆形
        ClipRRect( //剪裁为圆角矩形
          borderRadius: BorderRadius.circular(5.0),
          child: avatar,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              widthFactor: .5,//宽度设为原来宽度一半，另一半会溢出
              child: avatar,
            ),
            Text("你好世界", style: TextStyle(color: Colors.green),)
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ClipRect(//将溢出部分剪裁
              child: Align(
                alignment: Alignment.topLeft,
                widthFactor: .5,//宽度设为原来宽度一半
                child: avatar,
              ),
            ),
            Text("你好世界",style: TextStyle(color: Colors.green))
          ],
        ),
        ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(20.0),
            bottomRight: Radius.circular(30.0),
            bottomLeft: Radius.circular(40.0),
          ),
          child: Container(
            alignment: Alignment.center,
            constraints: const BoxConstraints(
              maxWidth: 100,
              maxHeight: 20,
            ),
            color: Colors.purple,
            child: const Text('ClipRRect'),
          ),
        ),
      ],
    ),
  );
}